<!-- <template>
  <fieldset>
    <legend>计数器</legend>
    <button @click="DECREMENT">-</button>
    &nbsp;
    <span>{{ num }}</span>
    &nbsp;
    <button @click="INCREMENT(10)">+</button>
    <h1>{{ reverseMsg }}</h1>
    <button @click="GET_PRODUCT">点击获取购物车数据</button>
    <ul>
      <li v-for="item in products" :key="item.id">{{ item.title }}</li>
    </ul>
  </fieldset>
</template> -->
<script>
// 在模板中可以通过$store.stare.xx这种方式获取
// 如果在组件实例中 那么需要加上this this.$store.state.xxx
// 可以通过辅助函数映射的方式来获取state,辅助函数的名字叫做mapState

// mutation变更
// 触发mutation函数的方法，通过commit
// 模板中通过$store.commit('mutation类型'，payload)
// 在实例中要加上this
// 辅助函数mapMutations 映射在methods

// action
// 通过$store.dipatch来触发action
// 辅助函数mapActions
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; //引入辅助函数
// 将状态映射在computed这个属性中
// 为什么要将state映射在计算属性中，而不是映射到data？
//其实可以直接映射在data中，只是使用时要加()不方便
//将state映射给data中的某一个属性
//会造成vuex更新之后 视图不更新 只有computed才会根据依赖发生改变而改变
export default {
  data() {
    return {
      cc: this.$store.state.num,
    };
  },
  mounted() {
    console.log(this.$store.state.num);
    console.log(this);
  },
  computed: {
    ...mapState(["num", "msg", "products"]),
    ...mapGetters(["reverseMsg"]),
  },
  methods: {
    ...mapMutations(["INCREMENT", "DECREMENT", "SET_PRODUCT"]),
    ...mapActions(["GET_PRODUCT"]),
  },
};
</script>
